{extend name="common/base" /}

{block name="style"}
<style type="text/css">
    body{
        background: #F5F5F5;
    }
    .sqbh-fixed .fixed-div4{
        width: 30%;
        float: right;
        position: relative;
    }
    .img-div{
        width:0.3rem;
        height:0.3rem;
        float: left;
    }
</style>
{/block}
{block name="body"}
<div class="sqbh1-mains">

    <div class="sqbh1-top">
        <h2 class="top-h2">补货须知</h2>
        <p class="top-ps">1.家庭盒子中商品剩余总价大于<i>￥{$buhuo_config.zongjian}</i>时，平台拒绝补货</p>
        <p class="top-ps">2.单次补货商品金额低于<i>￥{$buhuo_config.jine}</i>时，平台拒绝补货</p>
    </div>
    <div class="sqbh1-center">
        <div class="center-div">
            <span class="ce-span1">补货备注</span>
            <span class="ce-span2">{$info.quarters_name}-{$info.unit_name}-{$info.room_name}</span>
        </div>
        <textarea placeholder="对本次补货有啥要求，可以写在备注哟" class="tex-div js-remark"></textarea>
    </div>
    <div class="sqbh1-nav" style="margin-bottom:0.5rem;">
        <div class="li1">
            请选择补货数量
        </div>
        <div class="sy-gw">
            <ul class="sy-gw-left">
                {foreach $cate_list as $vo }
                <li {eq name="$vo['index_num']" value="0" } class="active" {/eq} >{$vo['cate_title']}</li>
                {/foreach}
            </ul>
            <ul class="sy-gw-rig">
                {foreach $cate_list as $row }
                <div class="left_li {eq name="$row['index_num']" value="$last_cate"}min-hg{/eq}" id="left_li{$row['index_num']}">
                     {foreach $row.goods_list as $vo }
                     <li>
                                 <img data-id="{$vo.goods_id}" src="__OSSCDN__{$vo.goods_logo}" class="rig-img js-show-detail">
                                 <div class="gw-rig-div">
                                     <p class="rig-div-p js-show-detail" data-id="{$vo.goods_id}" >【{$vo.brand_title}】{$vo.goods_title}{notempty name="$vo.goods_model"},{$vo.goods_model}{/notempty}{notempty name="$vo.goods_spec"},{$vo.goods_spec}{/notempty}</p>
                                     <div class="rig-bottom">
                                         <span class="rig-span">¥{$vo.selling_price}</span>
                                         <div class="sz-jg">
                                             <div data-id="{$vo['goods_id']}" data-type="0" data-ope="0" class="img-div change-num js-dec-num-{$vo['goods_id']}" {if $vo['buy_num'] ==0 }style="display:none;"{/if}>
                                                 <img src="__CDN__/html/img/hz-img26.png" class="img-jg" style="float:right;">
                                             </div>
                                             <input type="text" value="{$vo.buy_num}" class="text-inp js-goods-num-{$vo['goods_id']}" {if $vo['buy_num'] ==0 }style="display:none;"{/if}  disabled="disabled">
                                                    <div data-id="{$vo['goods_id']}" data-type="0" data-ope="1" class="img-div change-num js-inc-num-{$vo['goods_id']}">
                                                 <img src="__CDN__/html/img/hz-img23.png" class="img-jg">
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </li>
                             {/foreach}

                         </div>
                         {/foreach}

                </ul>

            </div>
        </div>
    </div>

    <div class="sqbh-fixed">
        <div class="fixed-div1">
            <div class="fixed-pa js-goods-total-price">本次补货总价:¥{$cart.total_price}</div>
            <div class="fixed-pa js-goods-total-num">本次补货商品数:{$cart.num}件</div>
        </div>
        <div class="fixed-div2 js-zf" data-type="3">边吃边付</div>
        {if condition="($buhuo_config['zhekou'] == 0) OR ($buhuo_config['zhekou'] == 10) "}
        <div class="fixed-div2 fixed-div4 js-zf" data-type="2">
            <div>立即支付</div>
        </div>
        {else /}
        <div class="fixed-div2 fixed-div3 js-zf" data-type="2">
            <div>立即支付</div>
            <div class="qx-j" style='right: 0;'>{$buhuo_config.zhekou}折</div>
        </div>
        {/if}
    </div>
    {/block}
    {block name="script"}
    <script>
        var myheight = $(window).height();
        $('.min-hg').css('min-height', myheight * 0.9);

        mui('body').on('tap', ".change-num", function (res) {
            var id = $(this).attr('data-id');
            var ope = $(this).attr('data-ope');
            var type = $(this).attr('data-type'); //操作类型 0-列表 1-详情

            $.post("{:url('change')}", {goods_id: id, ope: ope}, function (res) {
                if (res.code == '0') {
                    mui.toast(res.msg);
                } else {
                    if (res.code == '80') {
                        //删除
//                        $('.js-goods-num-' + id).val(0);
                        $('.js-goods-num-' + id).hide();
                        $('.js-dec-num-' + id).hide();
                        $('.js-goods-num-' + id).val(0);
                    } else if (res.code == '81') {
                        //新增
//                        $('.js-goods-num-' + id).val(1);
                        $('.js-goods-num-' + id).show();
                        $('.js-dec-num-' + id).show();
                        $('.js-goods-num-' + id).val(1);
                    } else {

                        //正常增减
                        var num = $('.js-goods-num-' + id).val();
                        if (ope == 1) {
                            num++;
                        } else {
                            num--;
                        }
                        if (type == 1) {
                            $('.js-tk-buynum').val(num);
                        }
                        $('.js-goods-num-' + id).val(num);
                    }
                    changeTotal(res.data.num, res.data.total_price);

                }
            }, 'json');
        });

        mui('body').on('tap', ".js-zf", function (res) {
            var remark = $('.js-remark').val();
            var type = $(this).attr('data-type'); //操作类型 2-边吃边付 3-立即支付

            $.post("{:url('comfirm')}", {type: type, remark: remark}, function (res) {
                if (res.code == '0') {
                    mui.toast(res.msg);
                } else {
                    location.href = res.data.url;
                }
            }, 'json');
        });

        function changeTotal(num, price) {
            $(".js-goods-total-num").html("本次补货商品数:" + num + "件");
            $(".js-goods-total-price").html("本次补货总价:¥" + price + "元");
        }
    </script>

    <script type="text/javascript">

        /* 滚动监听 */
        // 定义一个获取所有div的距离高度
        var arrOffsetTop = [];

        $(".left_li").each(function () {
            var top = $(this).offset().top;
            arrOffsetTop.push(top);
        });

        // 获取每个div的平均高度
        var fTotalHgt = 0;
        for (var i = 0; i < $('.left_li').length; i++) {
            fTotalHgt += $('.left_li').eq(i).outerHeight();
        }
        var fAverageHgt = parseFloat(fTotalHgt / $('.left_li').length);
        var is_scroll = 0;
        // 滚动事件(每次滚动都做一次循环判断)
        $(window).scroll(function () {
            //滚动730px，左侧导航固定定位
            if ($(window).scrollTop() > 335) {
                $('.sy-gw-left').css({'position': 'fixed', 'top': 0});
            } else {
                $('.sy-gw-left').css({'position': '', 'top': ''});
            }
            if (is_scroll == 0) {
                for (var i = 0; i < $('.left_li').length; i++) {
                    if ($(this).scrollTop() > arrOffsetTop[i] - fAverageHgt) {  // 减去一个固定值，是定位准确点
                        $('.sy-gw-left').find('li').eq(i).addClass('active').siblings().removeClass('active');
                    }
                }
            }

        });

        /* 点击事件 */
        $('.sy-gw-left').find('li').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            is_scroll = 1;
            $('.sy-gw-rig').scrollTop(arrOffsetTop[$(this).index()]);
            $('body, html').animate({scrollTop: arrOffsetTop[$(this).index()] - 10}, 500, 'swing', function () {
                is_scroll = 0;
            });
        });
    </script>
    {/block}